// 个人中心=>更换头像
const BASE_URL = "http://api-breakingnews-web.itheima.net";

axios.get(`${BASE_URL}/my/userinfo`,{
  headers:{
    Authorization:localStorage.getItem('token')
  }
}).then(res=>{
  let {user_pic}=res.data.data
  if(user_pic){
    $('#image').attr('src',user_pic)
  }
  handleCropper()
})

function handleCropper(){
  // 裁切
const image = document.getElementById("image");
let cropper = new Cropper(image, {
  aspectRatio: 1, // 裁剪图层的横纵比例
  preview: $(".img-preview"), // 多看文档里每个属性的意思, 一般都会有, 实在没有自己写/换个插件
});
//选择图片
$(".select").on("click", function () {
  $("#file").click();
});

$("#file").on("change", function () {
  let file = this.files[0];
  let url = URL.createObjectURL(file);
  cropper.replace(url);
});

$('.sure').on('click',function(){
  /**
 * 1. cropper 插件转化base64 的步骤
 */
//1.1 格式转换
let canvas = cropper.getCroppedCanvas({
  // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
  width: 100,
  height: 100,
})
//1.2 canvas图像 -> base64字符串
let base64Str = canvas.toDataURL('image/jpeg')
//1.3 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
base64Str = encodeURIComponent(base64Str)

let data =`avatar=${base64Str}`

axios.post(`${BASE_URL}/my/update/avatar`,data,{
  headers:{
    Authorization:localStorage.getItem('token')
  }
}).then(res=>{
  if(res.data.status===0){
    layer.msg('图片更换成功', {
      icon: 1,
      time: 2000,
    });
    window.parent.my_getUserInfo();
  }
})
})
}
